<template>

    <!-- 所有的内容要被根节点包含起来 -->
    <div id="">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media" v-for="item in newsList" :key="item.id">
                <router-link :to="'/home/newsinfo/' + item.id">
                    <img class="mui-media-object mui-pull-left" :src="item.img">
                    <div class="mui-media-body">
                        <h4 class="mui-media-h4">{{item.zhaiyao}}</h4>
                        <p class="mui-ellipsis">
                            <span>发表时间: {{item.time | dateFormat}}</span>
                            <span>点击: {{item.click}}次</span>
                        </p>
                    </div>
                </router-link>
            </li>
        </ul>
    </div>


</template>

<script type="text/javascript">

    import {Toast} from "mint-ui"

    // 导入时间插件
    import moment from 'moment'

    export default {
        data: function () {
            return {
                msg: '',
                newsList: []
            }
        },
        created() {
            this.getNewsList()
        },
        // 执行的方法
        methods: {
            // 后端解决跨域
            getNewsList() {
                this.$http.get('http://1v6721s159.iask.in/cors').then(res => {
                    console.log(res);
                    if (res.status === 200) {
                        console.log('后端设置跨域请求成功')
                        this.newsList = res.body.message;
                    } else {
                        Toast('新闻列表加载失败')
                    }
                }, function (res) {
                    Toast('数据请求失败')
                })
            }
        },
        filters: {

            // 单独格式化时间插件
            /*dateFormat: function(el){
                return moment(el).format("YYYY-MM-DD HH:mm:ss")
            }*/
        }
    }

</script>

<style scoped>
    .mui-table-view .mui-media, .mui-table-view .mui-media-body h4 {
        font-size: 14px;
    }

    .mui-table-view-cell .mui-ellipsis {
        font-size: 12px;
        color: #226aff;

        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mui-media-body .mui-media-h4 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

</style>
